/**
 * 审批进度弹窗
 * 
 * 参数
 * modalVisible 弹窗显示和隐藏
 * title  标题
 * onClosePress 关闭按钮
 * rowDataList 数据
 */
import React, { Component } from 'react';
import {
  ScrollView, StyleSheet, Text, View, TouchableOpacity, Image, Modal, PixelRatio
} from "react-native";
import navigationSeevice from '../../../../../../components/navigation/navigationSeevice';
import { GLOBAL } from '../../../../../../config/global';
const scale = GLOBAL.SCALE;
const closeImg = require('../../../../../../imgs/close.png')
export class ProgressModal extends Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  render () {
    let { modalVisible, title, onClosePress, rowDataList, active } = this.props;

    return (
      <Modal animationType={"fade"} transparent={true} visible={modalVisible}>
        <View style={styles.modalPage}>
          <View style={styles.modalWrap}>
            <View style={styles.modalTitle}>
              <Text style={{ fontSize: 16 * scale, fontWeight: "bold" }}>{title || ''}</Text>
              <TouchableOpacity style={{ width: 30 * scale, height: 30 * scale, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }} activeOpacity={.6} onPress={() => {
                onClosePress && onClosePress()
              }}>
                <Image source={closeImg} style={{ tintColor: '#0E7FFD', width: 14 * scale, height: 14 * scale }} />
              </TouchableOpacity>
            </View>

            <ScrollView style={[styles.modalBody]}>
              {
                rowDataList && rowDataList.map((item, index) => {
                  return (
                    <View key={index} style={[styles.progressItem]}>
                      {
                        index == rowDataList.length - 1 ? null : (
                          <View style={{ height: '100%', width: 1 * scale, backgroundColor: '#EBEDF0', position: 'absolute', left: 73 * scale, top: 5 * scale }}></View>
                        )
                      }
                      <View style={styles.nodeIcon}></View>
                      {
                        active ?
                          <Text style={styles.nodeStatus}>{item.action == null ? '操作' : item.action || '--'}</Text>
                          : <Text style={styles.nodeStatus}>{item.status == null ? '操作' : item.status || '--'}</Text>
                      }
                      {
                        active ?
                          <Text style={[styles.nodeTitle, { marginBottom: 7 * scale }]}>{item.createDate && item.createDate.substring(0, 16) || '--'}</Text>
                          : <Text style={[styles.nodeTitle, { marginBottom: 7 * scale }]}>{item.createTime && item.createTime.substring(0, 16) || '--'}</Text>
                      }


                      <Text style={[styles.nodeTitle, { fontWeight: '700', marginBottom: 5 * scale }]}>{item.organName || '--'}：{item.createByName || '--'}</Text>
                      <View style={{ flexDirection: 'row' }}>
                        {item.comments ? <Text style={styles.nodeInfo}>备注：{item.comments || '--'}</Text> : null}
                        {item.fileAddress ?
                          <Text style={[styles.nodeInfo, { color: '#0E7FFD', marginLeft: 5 * scale }]}
                            onPress={
                              () => { onClosePress && onClosePress(); navigationSeevice.navigate('ImgPreviewPage', { fileAddress: item.fileAddress }) }
                            }>【查看附件】</Text> : null}
                      </View>
                      <View style={{ height: 30 * scale }}></View>
                    </View>
                  )
                })
              }
              {rowDataList && rowDataList.length == 0 ? <Text style={{ paddingLeft: 30 * scale, paddingBottom: 30 * scale }}>暂无审批记录</Text> : null}

            </ScrollView>
          </View>
        </View>
      </Modal>
    )
  }
}

const styles = StyleSheet.create({
  modalPage: {
    width: GLOBAL.SCREEN_WIDTH,
    height: GLOBAL.SCREEN_HEIGHT,
    backgroundColor: 'rgba(0, 0, 0, .6)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalWrap: {
    width: 302 * scale,
    backgroundColor: '#fff',
    borderRadius: 4 * scale,
    overflow: 'hidden',
    paddingBottom: 10 * scale
  },
  modalTitle: {
    height: 60 * scale,
    paddingLeft: 32 * scale,
    paddingRight: 26 * scale,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  modalBody: {
    backgroundColor: 'rgb(255, 255, 255)',
    maxHeight: 328 * scale,
    paddingRight: 20 * scale,
    paddingTop: 10 * scale,
  },
  progressItem: {
    position: 'relative',
    paddingLeft: 14 * scale,
    paddingLeft: 88 * scale,
  },
  nodeTitle: {
    fontSize: 12 * scale,
    marginTop: -3 * scale
  },
  nodeInfo: {
    fontSize: 10 * scale,
    color: '#959BA8',
    lineHeight: 14 * scale,
  },
  nodeIcon: {
    width: 7 * scale,
    height: 7 * scale,
    backgroundColor: '#0E7FFD',
    borderRadius: 7 * scale,
    position: 'absolute',
    top: 0,
    left: 70 * scale,
  },
  nodeStatus: {
    position: 'absolute',
    fontSize: 12 * scale,
    top: -2 * scale,
    left: 18 * scale,
    minWidth: 40 * scale,
    textAlign: 'right'
  }
})
